<template>
    <div class="resume-projects" id="resume-projects">
        <h3>项目经验</h3>
        <ul>
            <li v-for="project in projects" :key="project.id">
                <h4>{{ project.name }}</h4>
                <p>{{ project.description }}</p>
                <ul>
                    <li v-for="task in project.tasks" :key="task.id">{{ task }}</li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';

    @Component({
        name: 'ResumeProjects',
        props: {
            projects: {
                type: Array,
                required: true,
            },
        },
    })
    export default class ResumeProjects extends Vue {
    }
</script>

<style scoped>
.resume-projects {
    margin-bottom: 20px;
}

.resume-projects h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.resume-projects h4 {
    font-size: 16px;
    margin-bottom: 5px;
}

.resume-projects p {
    margin-bottom: 10px;
}

.resume-projects ul {
    list-style-type: square;
    margin-left: 20px;
}

.resume-projects li {
    margin-bottom: 10px;
}
</style>